<template>
  <div class="mod-config" id="mesworkingprocedure">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.workingProcedureName" placeholder="工序名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.enabledFlg" placeholder="是否启用" clearable>
          <el-option
            v-for="item in enabledFlgList"
            :key="item.code"
            :label="item.name"
            :value="item.code">
          </el-option>
        </el-select>  
      </el-form-item>
      <el-form-item id="functionButton">
        <el-button @click="getDataList()">查询</el-button>
        <el-button v-if="isAuth('basic:mesworkingprocedure:save')" type="primary" @click="addOrUpdateHandle('mesworkingprocedure-add')">新增</el-button>
        <el-button v-if="isAuth('basic:mesworkingprocedure:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      height="395"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      :span-method="objectSpanMethod"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="parentWorkingProcedureName"
        header-align="center"
        align="center"
        width="35px"
        label="">
      </el-table-column>
      <el-table-column
        prop="workingProcedureName"
        header-align="center"
        align="center"
        label="工序名称">
      </el-table-column>
      <el-table-column
        prop="workingProcedureProperty"
        header-align="center"
        align="center"
        width="150px"
        label="工序性质">
      </el-table-column>
      <el-table-column
        prop="workingHours"
        header-align="center"
        align="center"
        width="80px"
        label="工时">
      </el-table-column>
      <el-table-column
        prop="dailyCapacity"
        header-align="center"
        align="center"
        width="80px"
        label="每日产能">
      </el-table-column>
      <el-table-column
        prop="equipmentCode"
        header-align="center"
        align="center"
        width="150px"
        label="设备">
      </el-table-column>
      <el-table-column
        prop="enabledFlgName"
        header-align="center"
        align="center"
        width="80px"
        label="是否启用">
      </el-table-column>
      <el-table-column
        prop="workInstructionNum"
        header-align="center"
        align="center"
        width="125px"
        label="工业要求">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="findInstructor(scope.row.workingProcedureNum)">见作业/检查指导书</el-button>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="100px"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle('mesworkingprocedure-update',scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.workingProcedureNum)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
  import AddOrUpdate from './mesworkingprocedure-add-or-update'
  export default {
    data () {
      return {
        dataForm: {
          workingProcedureName: '',
          enabledFlg: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        enabledFlgList: [{ code: '', name: '' }],
        spanArr: [] // 合并单元格数组
      }
    },
    components: {
      'add-or-update' : AddOrUpdate
    },
    activated () {
      this.getDataList()
    },
    mounted(){
      this.getDictList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/basic/mesworkingprocedure/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'workingProcedureName': this.dataForm.workingProcedureName,
            'enabledFlg': this.dataForm.enabledFlg
          })
        }).then(({data}) => {
          console.log(data)
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
            this.spanArr = [] // 页码改变时清空，重新push
            this.rowMergeArr()
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 获取字典数据列表
      getDictList(){
        this.dataListLoading = true
        let arr = ['sys_yes_no']
        this.$http({
          url:this.$http.adornUrl('/basic/mescodemasterm/dataList'),
          method: 'post',
          data: this.$http.adornParams(arr, false)
        }).then(({data}) => {
          if( data && data.code === 0 ) {
            data.sys_yes_no.forEach((item, index) => {
            let obj = {}
            obj.code = item.code
            obj.name = item.name
            this.enabledFlgList.push(obj)
            })
          }else {
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (name,params) {
        if(params){
          this.$router.push({
            name: name,
            params: {id: params.workingProcedureNum}
          })
        }else{
          this.$router.push({
            name: name
          })
        }
      },
      // 删除
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.workingProcedureNum
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/basic/mesworkingprocedure/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      //获取合并表格单元格数组方法
      rowMergeArr(){
        let contactDot = 0;
        this.dataList.forEach((item,index) => {
            item.index = index;
            if(index === 0){
                this.spanArr.push(1);
            }else{
              if(item.parentWorkingProcedureNum === this.dataList[index - 1].parentWorkingProcedureNum && item.parentWorkingProcedureNum !== ''){
                  this.spanArr[contactDot] +=1;
                  this.spanArr.push(0);
              }else{
                  this.spanArr.push(1);
                  contactDot = index;
              }
            }
        })
        console.log(this.spanArr)
      },
      //合并element表格单元格方法
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if(columnIndex === 1){
            const _row = this.spanArr[rowIndex]
            const _col = _row>0?1:0;
            return{
                  rowspan:_row,
                  colspan:_col                  
                }
        }
      },
      //查询相关作业指导书是否存在
      findInstructor(workingProcedureNum) {
        this.$http({
          url: this.$http.adornUrl(`/basic/mesworkingprocedure/findinstructor`),
          method: 'post',
          data: this.$http.adornData({
            workingProcedureNum: workingProcedureNum
          })
        }).then(data => {
          console.log(data)
          if (data.data.msg) {
            this.fileDownload(workingProcedureNum)
          } else {
            this.$message({
              message: '此工序尚未上传见作业/检查指导书',
              type: 'error',
              duration: 1500
            })
          }
        })
      },
      //下载文件
      fileDownload(workingProcedureNum) {
        window.location.href = this.$http.adornUrl(
        '/basic/mesworkingprocedure/downloadinstructor?workingProcedureNum=' +
          workingProcedureNum
        )
      },
    }
  }
</script>

<style lang="scss" scoped>
#mesworkingprocedure {
  .el-form {
    #functionButton {
      float: right;
    }
  }
}
</style>